<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递模板自动生成</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .upload-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }
        .upload-container h2 {
            margin-bottom: 20px;
            color: #333;
        }
        .upload-container input[type="file"] {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 4px;
            width: calc(100% - 22px);
        }
        .upload-container button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .upload-container button:hover {
            background-color: #0056b3;
        }
        .upload-container .message {
            margin-top: 20px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h2>快递模板自动生成</h2>
        <input type="file" id="fileInput" name="file">
        <button onclick="uploadFile()">生成模板</button>
        <div class="message" id="message"></div>
    </div>

    <script>
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const message = document.getElementById('message');

            // 清空消息区域
            message.innerText = '';

            if (!file) {
                message.innerText = '请选择一个文件';
                return;
            }

            // 检查文件类型
            const validExtensions = ['.xls', '.xlsx'];
            const fileExtension = file.name.split('.').pop().toLowerCase();

            if (!validExtensions.includes('.' + fileExtension)) {
                message.innerText = '请上传有效的 Excel 文件（.xls 或 .xlsx）';
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            fetch('http://127.0.0.1:8080/auto', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    return response.text().then(text => { throw new Error(text); });
                }
            })
            .then(data => {
                message.innerText = '文件上传成功: ' + data;
            })
            .catch(error => {
                message.innerText = '文件上传失败: ' + error.message;
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>